<template>
  <!-- 修改资料 -->

  <div>
    <ts-card header="套餐信息">
      <el-form
        label-width="100px"
        :model="form"
        label-position="right"
        ref="formRef"
        :rules="formRules"
      >
        <el-row>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="产品编号" required>
              <sc-table-select
                v-model="form"
                fileName="ProductReport"
                :props="productProps"
                :inputWidth="500"
                :mapping="productMapping"
                @change="productChange"
              ></sc-table-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="名称">
              <el-input v-model="form.name" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="单位">
              <el-input v-model="form.unitName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="规格">
              <el-input v-model="form.spec" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="主图">
              <el-image
                style="width: 100px; height: 100px"
                :src="form.imgSrc"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="srcList"
                fit="cover"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="生效日期">
              <el-date-picker
                v-model="form.effectDate"
                value-format="YYYY-MM-DD"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="失效日期">
              <el-date-picker
                v-model="form.invalidDate"
                value-format="YYYY-MM-DD"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="顺序">
              <el-input-number v-model="form.itemIndex"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="会员级别">
              <el-select
                v-model="form.memberLevelIdsArray"
                multiple
                clearable
                placeholder="请选择："
              >
                <el-option
                  v-for="item in configData.memberLevelList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="金额" required>
              <el-input v-model="form.pckPrice" type="number" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="状态" prop="status">
              <el-switch
                v-model="form.status"
                size="large"
                inline-prompt
                active-value="normal"
                inactive-value="disable"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </ts-card>
    <ts-card heder="套餐产品">
      <sc-form-table
        v-model="dataList"
        dragSort
        :addTemplate="addTemplate"
        @delete="rowDelete"
        placeholder="暂无数据"
      >
        <el-table-column label="产品编号" width="300">
          <template #default="scope">
            <ts-select
              multipe
              v-model="scope.row.mtlNo"
              fileName="ProductReport"
              :template="productProps2"
              @updateRow="mtlChange(scope, $event)"
              @selectRows="selectAllRow"
              :mapping="mapping"
              :label="scope.row.name"
            ></ts-select>
          </template>
        </el-table-column>
        <el-table-column label="产品名称" prop="name"></el-table-column>
        <el-table-column label="产品单位" prop="unitName"></el-table-column>
        <el-table-column label="产品单价" >
            <template #default="scope">
                <el-input-number v-model="scope.row.price"></el-input-number>
            </template>
        </el-table-column>
        <el-table-column label="产品数量" >
            <template #default="scope">
                <el-input-number v-model="scope.row.qty"></el-input-number>
            </template>
        </el-table-column>
      </sc-form-table>
    </ts-card>
    <div class="button-position">
      <el-button @click="updateVisible">取 消</el-button>
      <el-button type="primary" @click="addPCT(formRef)">确 定</el-button>
    </div>
  </div>
</template>


<script setup>
import { reactive, ref, onMounted } from "vue";
import { ElNotification } from "element-plus";
import Api from "@/api/model/pm";
import tsEditor from "@/components/scEditor/index.vue";
import tsSelect from "@/components/scSelect/index.vue";
import { deepClone } from "@/utils/arr";
import template from "@/utils/template";
const emit = defineEmits(["updatetable"]);
const props = defineProps({
  paramsData: {
    type: Object,
    defalut: {},
  },
});

// 添加用户数据的对象
const form = ref({});
const product = ref({})
const dataList = ref([])
const addTemplate = ref({});
const srcList = ref([]);
const configData = ref({});
const formRef = ref();
const formRules = reactive({});
const productProps = {
  value: "mtlNumber",
  label: "name",
};
const productProps2 = {
  value: "number",
  label: "name",
};
const productMapping = [
  { value: "id", label: "mtlId" },
  { value: "number", label: "mtlNumber" },
  { value: "name", label: "name" },
  { value: "unitId", label: "unitName" },
  { value: "spec", label: "spec" },
  { value: "price", label: "pckPrice" },
  { value: "imgSrc", label: "imgSrc" },
];
const mapping = [
  { value: "name", label: "name" },
  { value: "unitId", label: "unitName" },
  { value: "price", label: "price" },
  { value: "number", label: "number" },
];
onMounted(() => {
  getInit();
});

const updateVisible = () => {
  emit("updatetable");
};

const getInit = async () => {
  let res = await Api.package.add.post();
  if (res.code == "200") {
    configData.value = res.configData;
    form.value = deepClone(res.data);
    product.value = deepClone(res.data)
    addTemplate.value = res.dtl
    dataList.value.push(deepClone(addTemplate.value))
  }
};

const productChange = (val) => {
  srcList.value.splice(0, 1, val.imgSrc);
  
  form.value = Object.assign(deepClone(product.value), form.value);
};
const mtlChange = (scope,val)=>{
    console.log(scope.row,val)
    Object.assign(scope.row,val)
    dataList.value.push(addTemplate.value)
}
const selectAllRow = (val)=>{
    
    val.forEach(ele => {
       ele = Object.assign(deepClone(addTemplate.value),ele)
        dataList.value.unshift(ele)
    });
}

// 上传
const addPCT = async (formRef) => {
  await formRef.validate((valid, fields) => {
    if (valid) {
      addPCTData();
    }
  });
};

const addPCTData = async () => {
  // console.log(form.name);
  var params = {
    bean: form.value,
    dataList:dataList.value.filter(ele=>ele.number)
  };
  var res = await Api.package.save.post(params);
  console.log(res);
  if (res.code == 200) {
    ElNotification.success({
      title: "",
      message: "添加成功！",
      duration: 2000,
    });
    emit("updatetable", true);
  }
};
</script>

<style scoped></style>

